import React, { Component } from "react";

export default class Page5 extends Component {
  constructor() {
    super();
    this.state = {
      list: [1, 2, 3, 4], //有一个集合 数组
      arr: [
        { id: 1, username: "leson" },
        { id: 2, username: "lala" },
        { id: 3, username: "lulu" },
      ],
      arr2: [
        <div className="tr">
          <div className="td">1</div>
          <div className="td">leson</div>
        </div>,
        <div className="tr">
          <div className="td">2</div>
          <div className="td">lala</div>
        </div>,
        <div className="tr">
          <div className="td">3</div>
          <div className="td">lulu</div>
        </div>,
      ],
    };
  }
  render() {
    let arr3 = this.state.arr.map((item) => (
      <div className="tr" key={item.id}>
        <div className="td">{item.id}</div>
        <div className="td">{item.username}</div>
      </div>
    ));
    return (
      <div>
        {this.state.list}
        <hr />
        {/* {this.state.arr} */}
        {this.state.arr2}

        {this.state.arr.map((item) => (
          <div className="tr" key={item.id}>
            <div className="td">{item.id}</div>
            <div className="td">{item.username}</div>
          </div>
        ))}
        {arr3}
      </div>
    );
  }
}
